
<script setup>

import ExportJsonExcel from 'js-export-excel'

import { ref } from 'vue'
const value = ref('')
const value1=ref('')

let proList = [
    {
        class: '一年级',
        number: 3,
        attendance: 3,
        belate: 0,
        absenteeism: 0,
        attendancerate: '100%'
    },
    {
        class: '二年级',
        number: 4,
        attendance: 4,
        belate: 0,
        absenteeism: 0,
        attendancerate: '100%'
    },
    {
        class: '三年级',
        number: 5,
        attendance: 5,
        belate: 0,
        absenteeism: 0,
        attendancerate: '100%'
    },
]


function exportClick() {
    console.log(proList);
    // 创建导出对象
    let option = {}
    // 2.配置导出文件名字
    option.fileName = 'proList'
    // 3.配置需要导出的内容
    option.datas = [
        {
            // 导出的数据源
            sheetData: proList,
            // 工作表名称
            sheetName: "年级导出",
            // 需要导出数据源中的哪些字段
            sheetFilter: ["class", "number", "attendance", "belate", "absenteeism", "attendancerate"],
            // 被导出字段的标题
            sheetHeader: ["年级", "应到人数", "实到人数", "迟到", "缺勤", "出勤率"],
            // 导出后宽度
            columnWidths: [20, 20, 20, 20, 20, 20],
        }
    ]
    // 4.将内容创建成excel
    let toExcel = new ExportJsonExcel(option)
    //  5.保存 excel()
    toExcel.saveExcel();

}

// let newproList = [{}]
function changeVal (index) {
    // console.log(index);
    return proList =  proList.splice(index , 1)
}


</script>
<template>
    <el-container>
        <el-aside width="200px">
            <el-select v-model="value" @change="changeVal"  placeholder="请选择">
                <el-option v-for="item in proList" :key="item.number" :label="item.class" :value="item.class" />
            </el-select>
        </el-aside>
        <el-main>
            <div>
                <span class="demonstration">考勤日期: </span>
                <el-date-picker type="date" v-model="value1" placeholder="考勤日期" />
                <el-button @click="exportClick" style="float: right;" plain>文件导出</el-button>
            </div>
            <div>
                <el-table :data="proList" style="width: 100%">
                    <el-table-column type="index" label="序号" width="180" />
                    <el-table-column prop="class" label="年级" width="180" />
                    <el-table-column prop="number" label="应到人数" width="180" />
                    <el-table-column prop="attendance" label="实到人数" width="180" />
                    <el-table-column prop="belate" label="迟到" width="180" />
                    <el-table-column prop="absenteeism" label="缺勤" width="180" />
                    <el-table-column prop="attendancerate" label="出勤率" width="180" />
                </el-table>
                <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="proList.length" />
            </div>
        </el-main>
    </el-container>
</template>
<style lang="scss" scoped>
.el-container {
    height: 580px;

    .el-aside {
        background-color: blueviolet;
        padding: 10px;
    }

    .el-main {
        background-color: cadetblue;
        margin-left: 15px;

        .el-table {
            margin-top: 20px;
        }
    }
}
</style>